import { FC, useState, useEffect, useMemo } from 'react';
import { Layout, Menu, MenuProps } from 'antd';
import { createFromIconfontCN } from '@ant-design/icons';
import './index.css';
// 引入routes
// import routes from "@/router/routes"
import { history } from 'umi';
import { MailOutlined } from '@ant-design/icons';

const { Sider } = Layout;

// 声明类型
type Iprops = {
  collapsed: boolean;
};

// 自定义图标
const MyIcon = createFromIconfontCN({
  scriptUrl: '//at.alicdn.com/t/c/font_3605900_nroc5i50pe.js',
});

// 创建一个方法 递归生产menu
// antd中自带的menu类型
type MenuItem = Required<MenuProps>['items'][number];

function getItem(
  label: React.ReactNode,
  key: React.Key,
  icon?: React.ReactNode,
  children?: MenuItem[],
  type?: 'group',
): MenuItem {
  return {
    key,
    icon,
    children,
    label,
    type,
  } as MenuItem;
}

const SiderBase: FC<Iprops> = (props) => {
  let { collapsed } = props;

  const items: MenuItem[] = [
    getItem(
      '商品管理',
      'ProductManagerment',
      <MyIcon type="icon-shangpinguanli" />,
      [
        getItem('产品类目', 'ProductCategory', <MyIcon type="icon-leimu" />),
        getItem(
          '产品列表',
          'ProductList',
          <MyIcon type="icon-chanpinliebiao-02" />,
        ),
      ],
    ),
    getItem(
      '图片管理',
      'PictureManagerment',
      <MyIcon type="icon-tupian_huaban" />,
      [
        getItem(
          '轮播图管理',
          'CarsouelManagerment',
          <MyIcon type="icon-lunbotuguanli" />,
        ),
      ],
    ),

    getItem(
      '交易管理',
      'TransactionManagerment',
      <MyIcon type="icon-jiaoyiguanli" />,
      [
        getItem('交易金额', 'Amount', <MyIcon type="icon-jine" />),
        getItem('订单金额', 'Order', <MyIcon type="icon-dingdanguanli" />),
        getItem('退款管理', 'Refund', <MyIcon type="icon-tuikuanguanli" />),
      ],
    ),
    getItem('支付管理', 'PayManagerment', <MyIcon type="icon-zhifuguanli" />, [
      getItem('支付类型', 'PayType', <MyIcon type="icon-zhifuleixing" />),
    ]),
  ];

  let handleClick = (item: any) => {
    let path = '/' + item.keyPath.reverse().join('/');
    history.push(path);
  };

  return (
    <Sider className="sider" trigger={null} collapsible collapsed={collapsed}>
      <div className="logo" />
      <Menu
        theme="dark"
        mode="inline"
        defaultSelectedKeys={['1']}
        defaultOpenKeys={['sub1']}
        items={items}
        onClick={handleClick}
        // onOpenChange={handleOpenChange}
        // openKeys={openKey}
      />
    </Sider>
  );
};

export default SiderBase;
